<template>
  <div>
    <button @click="url = '/banana.json'">点我，换个接口请求</button>

    <div v-if="error">出错了。{{ error.message }}</div>
    <ul v-else-if="data">
      <li v-for="item in data" :key="item.id">
        <span>{{ item.name }}</span>
        <span>{{ item.address && item.address.name }}</span>
      </li>
    </ul>
    <div v-else>加载中...</div>
  </div>
</template>

<script>
import { ref } from "vue";
import { useFetch } from "../hooks/useFetch";

export default {
  setup() {
    const url = ref("/apple.json");

    // 1. 直接传递字符串的请求地址，ok
    // const { data, error } = useFetch("/apple.json");

    // 2. 传递 ref 数据的请求地址
    const { data, error } = useFetch(url);

    return {
      data,
      error,
      url,
    };
  },
};
</script>
